<template>
  <div class="app-container">
    <el-row :gutter="20">

      <el-col :span="4">
        <sticky :sticky-top="70">
          <el-menu
            :default-active="currentActive"
            :router="true"
            class="el-menu-vertical-demo myMenu">
            <el-menu-item index="/blog">
              <span>全部</span>
            </el-menu-item>
            <el-menu-item v-for="tag in tags" :key="tag.id" :index="'/blog/' + tag.id">
              <span>{{ tag.name }}</span>
            </el-menu-item>
          </el-menu>
        </sticky>
      </el-col>

      <el-col
        v-infinite-scroll="loadMore"
        :span="20"
        :infinite-scroll-disabled="isDisabled"
        infinite-scroll-distance="1"
        infinite-scroll-immediate="false"
        class="articleDes"
        style="overflow:auto; max-height: calc(100vh - 90px);">

        <div v-for="article in list" :key="article.id">
          <el-descriptions :column="1" :colon="false">
            <el-descriptions-item>
              <span style="font-size: 18px; font-weight: bold; color: #3d3d3d">
                <router-link :to="'/blog/details/' + article.id" target="_blank" class="inlineBlock myArticle">
                  {{ article.title }}
                </router-link>
              </span>
            </el-descriptions-item>
            <el-descriptions-item>
              <el-row style="width: 100%; height: 24px">
                <el-col :span="4">
                  <router-link :to="'/ucenter/index/' + article.userId" class="inlineBlock">
                    <el-avatar :src="article.avatar" :size="24"/>
                    <span class="nickNameSpan" style="vertical-align: top;">
                      {{ article.nickName }}
                    </span>
                  </router-link>
                </el-col>
                <el-col :span="16">
                  <span class="summarySpan">
                    {{ article.summary }}
                  </span>
                </el-col>
                <el-col :span="4">
                  <span style="font-size: small; color: #a69aaa">
                    <svg-icon icon-class="like" style="color: rgb(166, 154, 170)"/> {{ article.collectCount }}
                    <el-divider direction="vertical"/>
                    <i class="el-icon-chat-dot-square"/> {{ article.commentCount }}
                    <el-divider direction="vertical"/>
                    <i class="el-icon-view"/> {{ article.viewCount }}
                  </span>
                </el-col>
              </el-row>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider/>
        </div>

        <p v-if="loading" style="text-align: center">加载中...</p>
        <p v-if="noMore" style="text-align: center">没有更多了</p>
      </el-col>

    </el-row>
  </div>
</template>

<script>

import Sticky from '@/components/Sticky'

import tagApi from '@/api/cms/tag'
import articleApi from '@/api/cms/article'

export default {
  name: 'Index',

  components: { Sticky },

  data() {
    return {
      tags: [],
      list: null,
      page: 1,
      total: 0,
      pageSize: 10,
      articleQuery: {
        page: 1,
        limit: 10,
        tagID: null,
        channelID: null,
        title: null,
        status: 1
      },
      loading: false,
      noMore: false
    }
  },

  computed: {

    currentActive() {
      const path = this.$route.path
      if (path.endsWith('/')) {
        return '/blog'
      }
      return path.substring(path.indexOf('/blog'))
    },

    isDisabled() {
      return this.loading || this.noMore
    }

  },

  watch: {
    '$route'(to, from) {
      this.initTags()
      this.getArticleList()
    }
  },

  created() {
    this.initTags()
    this.getArticleList()
  },

  methods: {

    initTags() {
      tagApi.getAllTags().then(res => {
        this.tags = res.result
      }).catch(error => {
        console.log(error)
      })
    },

    currentTagId() {
      const tagId = this.$route.path.substr(this.$route.path.indexOf('/blog') + 6)
      if (tagId.length === 0) {
        return null
      }
      return tagId
    },

    getArticleList() {
      this.articleQuery.tagID = this.currentTagId()
      articleApi.getAllArticles(this.articleQuery).then(res => {
        this.list = res.result.items
        this.noMore = res.result.items.length < this.articleQuery.limit
      }).catch(error => {
        console.log(error)
      })
    },

    loadMore() {
      console.log(666)
      this.loading = true
      this.articleQuery.page += 1
      articleApi.getAllArticles(this.articleQuery).then(res => {
        if (this.list !== null) {
          console.log(this.list)
          this.list = this.list.concat(res.result.items)
          console.log(this.list)
        }
        this.noMore = res.result.items.length < this.articleQuery.limit
        this.loading = false
      }).catch(error => {
        console.log(error)
      })
    }

  }
}
</script>

<style scoped>

body {
  overflow-y: hidden;
}

.myMenu {
  width: 100px;
  text-align: center;
}

.myMenu .el-menu-item {
  color: #555666;
  font-size: 14px;
  border-radius: 4px;
}

.myMenu .el-menu-item.is-active {
  color: black;
  font-size: 16px;
  font-weight: 700;
}

.myMenu .el-menu-item:focus, .el-menu-item:hover {
  color: black;
  font-size: 16px;
  font-weight: 700;
  background-color: #f6f7f8;
}

.articleDes .el-divider--horizontal {
  margin: 0;
}

.articleDes .summarySpan {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  color: rgb(138, 138, 138);
  padding-right: 10px;
}

.articleDes .myArticle:hover {
  color: rgb(64, 158, 255);
}

.articleDes .nickNameSpan:hover {
  color: rgb(64, 158, 255);
}

</style>
